<template>
    <div class="search">
        <add v-if="currView == 'add'" @close="currView = 'index'" @submited="submited" />
        <edit v-if="currView == 'edit'" @close="currView = 'index'" @submited="submited" :data="formData" />
        <Card v-show="currView == 'index'">
            <Row v-show="openSearch" @keydown.enter.native="handleSearch">
                <Form ref="searchForm" :model="searchForm" inline :label-width="0">
                    <Form-item ref="searchForm" :model="searchForm" inline :label-width="0" style="display:flex;">
                        <Form-item label="" prop="name">
                            <Input type="text" v-model="searchForm.orderid" placeholder="订单编号" clearable
                                style="width: 210px" />
                        </Form-item>
                        <Form-item style="margin-left:10px;" class="br">
                            <Button @click="handleSearch" type="primary" icon="ios-search" size="small"
                                ghost>搜索</Button>
                            <Button @click="handleReset" type="warning" size="small" icon="md-refresh" ghost>重置</Button>
                            <!-- <Button @click="add" type="info" size="small" icon="md-add" ghost>添加</Button>
                            <Button @click="delAll" type="error" icon="md-trash" size="small" ghost>删除</Button> -->
                            <Button @click="excelData" type="success" icon="md-paper-plane" size="small"
                                ghost>导出</Button>
                        </Form-item>

                    </Form-item>
                </Form>
            </Row>
            <Row class="operation" style="position:relative;">
                <transition>
                    <div v-show="showFilterPanelFlag" class="filter-panel">
                        <CheckboxGroup v-model="selected">
                            <div v-for="item in mycolumns" :key="item.key">
                                <Checkbox :label="item.title" style="margin: 2px 5px"></Checkbox>
                            </div>
                        </CheckboxGroup>
                    </div>
                </transition>
            </Row>
            <Row v-show="openTip"> </Row>
            <Row>
                <Table :loading="loading" :height="tableHeight" border stripe size="small" :columns="columns"
                    :data="datas" ref="table" sortable="custom" @on-sort-change="changeSort"
                    @on-selection-change="changeSelect" @on-row-click="rowClick" :row-class-name="rowClassNmae"></Table>
            </Row>
            <Row type="flex" justify="end" class="page">
                <Page :current="searchForm.page" :total="total" :page-size="searchForm.limit" @on-change="changePage"
                    @on-page-size-change="changelimit" :page-size-opts="[15, 20, 50]" size="small" show-total
                    show-elevator show-sizer></Page>
            </Row>
        </Card>
    </div>
</template>

<script>
import { getOrderYZFList, editOneOrder, deleteOneOrder, queryCount } from "../demo/demo1/api";
// import add from "./add.vue";
// import edit from "./edit.vue";
import dict from "@/views/template/dict";
export default {
    name: "single-window",
    components: {
        // add,
        // edit,
        dict
    },
    data() {
        return {
            tableHeight: 0,
            selected: [
                "选择",
                "序号",
                "订单编号",
                "商品名称",
                "商品图片",
                "购买数量",
                "价格",
                "总价",
                "支付类型",
                "状态",
                "地址",
                "操作",
            ],
            modal1: false,
            openSearch: true, // 显示搜索
            openTip: true, // 显示提示
            formData: {},
            currView: "index",
            loading: true, // 表单加载状态
            searchForm: { // 搜索框初始化对象
                page: 1, // 当前页数
                limit: 15, // 页面大小
                sort: "id", // 默认排序字段
                status: "已完成", // 默认排序方式
                orderid: "", // 订单编号
                goodname: "", // 商品名称
            },
            selectList: [], // 多选数据
            selectCount: 0, // 多选计数
            selectRow: 0,
            columns: [
                // 表头
                {
                    type: "selection",
                    width: 60,
                    title: "选择",
                    align: "center",
                    fixed: "left",
                },
                {
                    title: "序号",
                    width: 80,
                    align: "center",
                    fixed: "left",
                    sortType: true,
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index +
                            (this.searchForm.page - 1) * this.searchForm.limit +
                            1
                        );
                    },
                },
                {
                    title: "订单编号",
                    key: "orderid",
                    minWidth: 180,
                    tooltip: true,
                    sortable: false,
                },
                {
                    title: "购买数量",
                    key: "buynumber",
                    minWidth: 70,
                    tooltip: true,
                    sortable: false,
                    render: (h, params) => {
                        return h("div", params.row.itemsJson.length + "件");
                    }
                },
                {
                    title: "总价",
                    key: "discounttotal",
                    sortable: true,
                    sortType: "desc",
                    minWidth: 180,
                    align: "center",
                    tooltip: true,
                },
                {
                    title: "支付类型",
                    key: "type",
                    sortable: true,
                    sortType: "desc",
                    minWidth: 100,
                    align: "center",
                    tooltip: true,
                    render: (h, params) => {
                        return h("div", [
                            h('span', params.row.type === 1 ? "微信" : "现金")
                        ])
                    }
                },
                {
                    title: "状态",
                    key: "status",
                    minWidth: 180,
                    align: "center",
                    tooltip: true,
                },
                {
                    title: "操作",
                    key: "action",
                    align: "center",
                    width: 180,
                    fixed: "right",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button", {
                                props: {
                                    type: "primary",
                                    size: "small",
                                    icon: "ios-create-outline",
                                    ghost: true
                                },
                                style: {
                                    marginRight: "5px"
                                },
                                on: {
                                    click: (e) => {
                                        this.edit(params.row);
                                    }
                                }
                            },
                                "查看"
                            ),
                            h(
                                "Button", {
                                props: {
                                    type: "error",
                                    size: "small",
                                    icon: "md-trash",
                                    ghost: true
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row);
                                    }
                                }
                            },
                                "删除"
                            )
                        ]);
                    }
                }
            ],
            datas: [], // 表单数据
            page: 1, // 当前页数
            limit: 10, // 页面大小
            total: 0, // 表单数据总数
            showFilterPanelFlag: false,
        };
    },
    methods: {
        init() {
            this.getDataList();
        },
        submited() {
            this.currView = "index";
            this.getDataList();
        },
        changePage(v) {
            this.searchForm.page = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changelimit(v) {
            this.searchForm.limit = v;
            this.getDataList();
        },
        rowClick(row, index) {
            this.selectRow = row;
        },
        rowClassNmae(row, index) {
            if (row.id == this.selectRow.id) {
                return "rowClassNmaeColor";
            }
            return "";
        },
        excelData() {
            this.$refs.table.exportCsv({
                filename: "导出结果",
            });
        },
        handleSearch() {
            this.searchForm.page = 1;
            this.searchForm.limit = 15;
            this.getDataList();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            this.searchForm.page = 1;
            this.searchForm.limit = 15;
            this.searchForm.orderid = "";
            // 重新加载数据
            this.getDataList();
        },
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order === "normal") {
                this.searchForm.order = "";
            }
            this.getDataList();
        },
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        changeSelect(e) {
            this.selectList = e;
            this.selectCount = e.length;
        },
        getDataList() {
            this.loading = true;
            const params = {
                status: '已完成',
            }
            queryCount(params).then(res => {
                if (res.success)
                    this.total = res.result;
            })
            getOrderYZFList(this.searchForm).then(res => {
                console.log(res.result);
                this.loading = false;
                if (res.success) {
                    const newResult = res.result.map((item) => {
                        item.itemsJson = JSON.parse(item.itemsJson)
                        return item;
                    })
                    this.$nextTick(() => {
                        this.datas = newResult;
                    })
                }

            });
        },
        add() {
            this.currView = "add";
        },
        edit(row) {
            console.log(row.itemsJson); // 是一个数组对象，有很多个对象，每个对象有buynumber，goodid，goodname，picture，price

            // 使用map方法遍历itemsJson数组，将每个对象的信息拼接成字符串
            const itemsContent = row.itemsJson.map(item => {
                return `<div>
                    <p>商品名称：${item.goodname}</p>
                    <p>购买数量：${item.buynumber}</p>
                    <p>商品价格：${item.price}</p>
                    <p>商品图片：<img src="${item.picture}" style="width:100px;height:100px;vertical-align: middle;"/></p>
                    <span style="display:block;border: 1px dashed #333;margin: 3px 0px;"></span>
               </div>`;
            }).join('');

            this.$Modal.confirm({
                title: "订单详情",
                content: `订单号：${row.orderid}<br/>订单状态：${row.status}<br/>订单创建时间：${row.addtime}<br/>${itemsContent}`,
                loading: true,
                onOk: () => {
                    this.$Modal.remove();
                }
            });
        },

        remove(v) {
            console.log(v.id);
            this.$Modal.confirm({
                title: "确认删除",
                // 记得确认修改此处
                content: "确认进行删除 " + v.id + " ?",
                loading: true,
                onOk: () => {
                    // 删除
                    const params = {
                        ids: v.id
                    }
                    deleteOneOrder(params).then(res => {
                        console.log(res);
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.getDataList();
                        }
                    });
                }
            });
        },
        delAll() {
            if (this.selectCount <= 0) {
                this.$Message.warning("您还未选择要删除的数据");
                return;
            }
            this.$Modal.confirm({
                title: "确认删除",
                content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                loading: true,
                onOk: () => {
                    let ids = "";
                    this.selectList.forEach(function (e) {
                        ids += e.id + ",";
                    });
                    ids = ids.substring(0, ids.length - 1);
                    // 批量删除
                    deleteOneOrder({
                        ids: ids
                    }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        }
    },
    mounted() {
        this.init();
        this.tableHeight = Number(window.innerHeight - 273);
        this.mycolumns = this.columns;
        let showcolumns = [];
        for (var i = 0; i < this.selected.length; i++) {
            var item = this.selected[i];
            for (var j = 0; j < this.columns.length; j++) {
                if (this.columns[j].title == item) {
                    showcolumns.push(this.columns[j]);
                }
            }
        }
        this.columns = showcolumns;
    },
    watch: {
        selected: function (newcolumns) {
            let showcolumns = [];
            for (var i = 0; i < this.mycolumns.length; i++) {
                var item = this.mycolumns[i];
                if (item.title == undefined) showcolumns.push(item);
                else if (newcolumns.contains(item.title)) showcolumns.push(item);
            }
            this.columns = showcolumns;
        },
    },
};
</script>

<style lang="less">
// @import "../../../styles/table-common.less";
.search {
    .operation {
        margin-bottom: 2vh;
    }

    .select-count {
        font-weight: 600;
        color: #40a9ff;
    }

    .select-clear {
        margin-left: 10px;
    }

    .page {
        margin-top: 2vh;
    }

    .drop-down {
        margin-left: 5px;
    }
}

.filter-panel {
    width: 166px;
    min-height: 120px;
    height: 200px;
    position: absolute;
    background-color: white;
    z-index: 9999;
    margin-left: 1px;
    overflow-y: scroll;
    border: 1px solid blue;
    top: 35px;
    right: 10px;
}

.openSearch {
    position: absolute;
    right: 240px;
}

.openTip {
    position: absolute;
    right: 130px;
}

.showFilterPanelFlag {
    position: static !important;
    right: 10px;
    margin-right: 10px;
}

.ivu-table td {
    height: 38px !important;
}

.ivu-table-cell-with-expand {
    height: 38px !important;
    line-height: 38px !important;
}

.ivu-table .rowClassNmaeColor td {
    background-color: #b0b3b6 !important;
    color: #ffffff !important;
    font-size: 12px;
}
</style>
